<template>
  <div class="container">
    <el-row type="flex" justify="center">
      <el-col :span="20">
        <el-row class="video-box">
          <div class="title">
            <h2>{{ lesson.title }}</h2>
            <div style="float: right">
              <h2>直播</h2>
            </div>
          </div>

          <el-card :body-style="{ padding: '0px' }">
            <video
              id="myVideo"
              class="video-js vjs-big-play-centered vjs-fluid"
              controls
              preload="auto"
              :poster="lesson.coverUrl"
            >
              <source type="video/mp4" :src="this.src" />
            </video>
            <el-row class="bottom" type="flex" justify="space-between">
              <el-col :span="4">
                <el-row type="flex" justify="start"> </el-row>
              </el-col>
              <el-col :span="5">
                <el-row type="flex" justify="end">
                  <el-col :span="4">
                    <!-- <el-link>收藏</el-link> -->
                  </el-col>
                  <el-col :span="2">
                    <el-divider direction="vertical"></el-divider>
                  </el-col>
                  <el-col :span="9"> 主讲教师： </el-col>
                  <el-col :span="9">
                    <el-link>{{ lesson.teacher.realName }}</el-link>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <el-row :gutter="20">
          <el-divider content-position="left"> 简介 </el-divider>
          <el-row class="desc">
            {{ lesson.content }}
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lesson: {
        id: "",
        title: "",
        content: "",
        teacher: {
          realName: "",
        },
      },

      src: "",

      myPlayer: undefined,
    };
  },
  created() {
    this.src = "http://127.0.0.1:8080/live/" + this.$store.getters["live/liveRoomId"] + ".live.mp4"

    this.lesson.title = this.$store.getters["live/title"];
    this.lesson.content = this.$store.getters["live/content"];
    this.lesson.id = this.$store.getters["live/id"];
    this.lesson.teacher.realName = this.$store.getters["live/teacherName"];

    this.initVideo();
  },
  methods: {
    initVideo() {
      this.$nextTick(() => {
        let myPlayer = this.$video(document.getElementById("myVideo"), {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: true,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "1600",
          //设置视频播放器的显示高度（以像素为单位）
          height: "700",
          controlBar: {
            playToggle: true,
          },
        });
        this.myPlayer = myPlayer;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 90vh;

  padding-bottom: 2rem;

  .el-divider__text {
    background-color: #edf3ff;
  }
}

.video-box {
  margin-top: 2rem;

  .title {
    display: flex;
    margin: 0.5rem;
    justify-content: space-between;
  }

  .bottom {
    padding: 0.8rem;
  }
}

.desc {
  p {
    text-indent: 50px;
    text-align: justify;
    letter-spacing: 1px;
    word-wrap: break-word;
  }
}

.period {
  margin-top: 1rem;

  .item {
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-align: start;

    &:hover {
      background: #66b1ff;
      color: #fff;
    }
  }
}
</style>